<template>
  <div class="four-container">
    <div class="four-scan" ref="content" @mousedown="startDrag">
      <div v-if="showMainBoard" class="checking">
        <div class="header" :style="headerBg">
          <!-- <img src="@/assets/images/dun.png" /> -->
          <i class="iconfont icon-dunpai" :style="`color: ${globalStore.primary}`"></i>
          <div class="right">
            <!-- <div class="title" :style="titleColor">四性检测</div> -->
            <div class="right-top">
              <div class="title" :style="titleColor">四性检测</div>
              <div class="line"></div>
              <div class="modal">deepseek | QwQ32B</div>
            </div>
            <div class="small-title" :style="`color: ${globalStore.primary}`">
              <div class="title-item">真实性检测</div>
              <div class="title-item">完整性检测</div>
              <div class="title-item">可用性检测</div>
              <div class="title-item">安全性检测</div>
            </div>
            <div class="current-item" :style="`color: ${globalStore.primary}`">
              <div
                class="cur-title"
                :title="`${curFourAspectItem.Code} ${curFourAspectItem.Title}`"
                :style="`max-width: ${allFinish ? '86%' : '50%'}`"
              >
                {{ curFourAspectItem.Code }} {{ curFourAspectItem.Title }}
              </div>
              <span>{{ stopReqFlag ? "已暂停" : allFinish ? "已完成" : "四性检测扫描中......" }}</span>
              <div v-if="!allFinish" class="vector" :style="`border-color: ${globalStore.primary}`">
                <div class="triangle" :style="vectorBg"></div>
                已接入四性检测大模型
              </div>
            </div>
          </div>
          <div class="check-tab">
            <div class="tab-item" @click="changeTab(1)">
              <span><i class="iconfont icon-xitongguanli"></i>四性检测机检</span>
              <div v-if="activeTab === 1" class="line"></div>
            </div>
            <div class="divider"></div>
            <el-popover popper-class="aspect-pop" placement="top-start" trigger="hover">
              <template #reference>
                <div class="tab-item" @click="changeTab(2)">
                  <span><i class="iconfont icon-rengongjiance"></i>四性检测人工</span>
                  <div v-if="activeTab === 2" class="line"></div>
                </div>
              </template>
              <el-checkbox
                label="全部通过"
                v-model="manualCheckAll"
                :indeterminate="manualCheckIndeterminate"
                @change="manualCheckAllHandle"
              ></el-checkbox>
            </el-popover>
          </div>
          <div class="stop-btn">
            <div class="time">已用时：{{ formattedTime }}</div>
            <div class="stop-san" @click="scaningHandle">
              {{ finishCount === 100 ? "已完成" : stopReqFlag ? "重新扫描" : "停止扫描" }}
            </div>
          </div>
          <div class="close" @click="closeHandle">
            <el-icon><CircleCloseFilled /></el-icon>
          </div>
        </div>
        <div class="progress-container">
          <div class="progress-bar" :style="barStyle"></div>
        </div>
        <div class="scan-container">
          <div class="scan-animate">
            <CircleAnimate :percentage="finishCount" :allFinish="allFinish" />
            <div class="stages">
              <div v-if="statusLinks === 'Collect'" class="stages-item" :style="stagesColor">
                <i class="iconfont icon-guidang"></i><span>归档环节</span>
              </div>
              <div v-if="statusLinks === 'Arrangement'" class="stages-item" :style="stagesColor">
                <i class="iconfont icon-xuanzhuan"></i><span>移交与接收环节</span>
              </div>
              <div v-if="statusLinks === 'Storage'" class="stages-item" :style="stagesColor">
                <i class="iconfont icon-chongzhijilu"></i><span>长期保存环节</span>
              </div>
              <div class="footer" :style="stagesColor">
                <div class="left">
                  <i class="iconfont icon-jiancelishi"></i>
                </div>
                <div class="right">
                  <div class="his">最近一次检测时间：{{ lastCheckTime() }}</div>
                  <div class="his">今日已检测：{{ dailycCheckedCount }}次</div>
                </div>
              </div>
            </div>
          </div>
          <div class="item-wrapper" ref="containerRef">
            <el-collapse v-model="activeNames" accordion>
              <el-collapse-item v-for="(item, index) in showList" :key="item.Code" title="Consistency" :name="index + 1">
                <template #title>
                  <div class="collapse">
                    <div v-if="item.outLoading" :style="loadingStyle" class="loading-circle"></div>
                    <el-icon v-if="!item.outLoading && !failureFlag(item) && !notCheckPass(item)" class="successing"
                      ><SuccessFilled
                    /></el-icon>
                    <!-- <el-icon v-if="!item.outLoading && failureFlag(item)" class="warning"><WarningFilled /></el-icon> -->
                    <i
                      v-if="!item.outLoading && (failureFlag(item) || notCheckPass(item))"
                      class="iconfont icon-fengxianfenxi"
                    ></i>
                    <div
                      class="collapse-title"
                      :style="`max-width: ${activeTab === 1 ? '100%' : '72%'}; width: ${activeTab === 1 ? '100%' : ''}`"
                    >
                      <div class="title-left" :title="item.title" :style="`max-width: ${activeTab === 1 ? '30%' : '52%'}`">
                        {{ item.code }} {{ item.title }}
                      </div>
                      <div v-if="!item.outLoading && activeTab === 1">
                        - 总共
                        {{
                          item.realSanningReqCount +
                          item.complateScanningReqCount +
                          item.useScanningReqCount +
                          item.securityScanningReqCount
                        }}
                        项，机检
                        {{
                          item.realSanningFailureCount +
                          item.complateScanningFailureCount +
                          item.useScanningFailureCount +
                          item.securityScanningFailureCount
                        }}
                        项失败，人工检 {{ notCheckPass(item) }} 项失败
                      </div>
                      <div v-if="activeTab === 2">
                        - 总共
                        {{
                          item.manualRealSanning.length +
                          item.manualComplateScanning.length +
                          item.manualUseScanning.length +
                          item.manualSecurityScanning.length
                        }}
                        项， {{ notCheckPass(item) }} 项未通过
                      </div>
                      <div class="checkPart" @click.stop>
                        <el-checkbox
                          v-if="activeTab === 2"
                          v-model="item.itemAll_Pass"
                          :indeterminate="item.itemAllIndeterminate"
                          size="large"
                          label="全部通过"
                          @change="(value: any, e: any) => handleItemCheckAll(value, item, e)"
                        ></el-checkbox>
                      </div>
                    </div>
                  </div>
                </template>
                <div class="big-class">
                  <div class="father">
                    <div class="father-title">
                      真实性检测<span v-show="(activeTab === 1 && item.realSanningReqCount) || activeTab === 2">
                        - {{ activeTab === 1 ? item.realSanningReqCount : item.manualRealSanning.length }}项</span
                      >
                      <span class="father-title_des">检测数据类型、格式、长度、档号是否符合真实性</span>
                    </div>
                    <div class="father-icon">
                      <el-checkbox
                        v-if="item.manualRealSanning.length && activeTab === 2"
                        v-model="item.ManualRealAll_Pass"
                        :indeterminate="item.manualRealIndeterminate"
                        label="全部通过"
                        @change="(value: any) => handleCheckAll(value, item, item.manualRealSanning, 'manualRealSanning')"
                      />
                      <el-icon v-if="activeTab === 1"><ArrowDown /></el-icon>
                    </div>
                  </div>
                  <div class="child-container">
                    <div v-if="activeTab === 1">
                      <div v-for="(real, i) in item.realSanning" :key="i" class="child">
                        <div v-if="!real.Is_Manual_Processing" class="machine">
                          <div class="left" :style="`color: ${leftTextColor(real.FourAspect_Pass)}`">
                            <div class="child-item">{{ real.code }}</div>
                            <div class="child-item" :title="real.Verification_Item">{{ real.Verification_Item }}</div>
                            <div class="child-item" :title="real.Verification_Purpose">{{ real.Verification_Purpose }}</div>
                            <div class="child-item" :title="real.Verification_Target">{{ real.Verification_Target }}</div>
                          </div>
                          <div class="right">
                            <span v-if="real.FourAspect_Pass === 1" :style="`color: ${globalStore.primary}`">扫描中...</span>
                            <span v-if="real.FourAspect_Pass === 2" :style="`color: ${globalStore.primary}`">成功</span>
                            <span v-if="real.FourAspect_Pass === 3" style="color: #f56c6c">失败</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <div v-for="(r, i) in item.manualRealSanning" :key="i" class="child">
                        <div class="left" :style="`color: ${r.loading ? globalStore.primary : ''}`">
                          <div class="child-item">{{ r.code }}</div>
                          <div class="child-item" :title="r.Verification_Item">{{ r.Verification_Item }}</div>
                          <div class="child-item" :title="r.Verification_Purpose">{{ r.Verification_Purpose }}</div>
                          <div class="child-item" :title="r.Verification_Target">{{ r.Verification_Target }}</div>
                        </div>
                        <div class="right">
                          <el-checkbox
                            v-model="r.FourAspect_Pass"
                            label="通过"
                            :true-label="2"
                            :false-label="3"
                            @change="(value: any) => handleCheckboxChange(value, item, r, 'manualRealSanning')"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="big-class">
                  <div class="father">
                    <div class="father-title">
                      完整性检测<span v-show="(activeTab === 1 && item.complateScanningReqCount) || activeTab === 2">
                        - {{ activeTab === 1 ? item.complateScanningReqCount : item.manualComplateScanning.length }}项</span
                      >
                      <span class="father-title_des">检测数据内容齐全及数据的连续性</span>
                    </div>
                    <div class="father-icon">
                      <el-checkbox
                        v-if="item.manualComplateScanning.length && activeTab === 2"
                        v-model="item.ManuaComplAll_Pass"
                        :indeterminate="item.manualComplIndeterminate"
                        label="全部通过"
                        @change="(value: any) => handleCheckAll(value, item, item.manualComplateScanning, 'manualComplateScanning')"
                      />
                      <el-icon v-if="activeTab === 1"><ArrowDown /></el-icon>
                    </div>
                  </div>
                  <div class="child-container">
                    <div v-if="activeTab === 1">
                      <div v-for="(comp, index) in item.complateScanning" :key="index" class="child">
                        <div v-if="!comp.Is_Manual_Processing" class="machine">
                          <div class="left" :style="`color: ${leftTextColor(comp.FourAspect_Pass)}`">
                            <div class="child-item">{{ comp.code }}</div>
                            <div class="child-item" :title="comp.Verification_Item">{{ comp.Verification_Item }}</div>
                            <div class="child-item" :title="comp.Verification_Purpose">{{ comp.Verification_Purpose }}</div>
                            <div class="child-item" :title="comp.Verification_Target">{{ comp.Verification_Target }}</div>
                          </div>
                          <div class="right">
                            <span v-if="comp.FourAspect_Pass === 1" :style="`color: ${globalStore.primary}`">扫描中...</span>
                            <span v-if="comp.FourAspect_Pass === 2" :style="`color: ${globalStore.primary}`">成功</span>
                            <span v-if="comp.FourAspect_Pass === 3" style="color: #f56c6c">失败</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <div v-for="(c, i) in item.manualComplateScanning" :key="i" class="child">
                        <div class="left" :style="`color: ${c.loading ? globalStore.primary : ''}`">
                          <div class="child-item">{{ c.code }}</div>
                          <div class="child-item" :title="c.Verification_Item">{{ c.Verification_Item }}</div>
                          <div class="child-item" :title="c.Verification_Purpose">{{ c.Verification_Purpose }}</div>
                          <div class="child-item" :title="c.Verification_Target">{{ c.Verification_Target }}</div>
                        </div>
                        <div class="right">
                          <el-checkbox
                            v-model="c.FourAspect_Pass"
                            label="通过"
                            :true-label="2"
                            :false-label="3"
                            @change="(value: any) => handleCheckboxChange(value, item, c, 'manualComplateScanning')"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="big-class">
                  <div class="father">
                    <div class="father-title">
                      可用性检测<span v-show="(activeTab === 1 && item.useScanningReqCount) || activeTab === 2">
                        - {{ activeTab === 1 ? item.useScanningReqCount : item.manualUseScanning.length }}项</span
                      >
                      <span class="father-title_des">检测数据是否可读取、备份及恢复</span>
                    </div>
                    <div class="father-icon">
                      <el-checkbox
                        v-if="item.manualUseScanning.length && activeTab === 2"
                        v-model="item.ManualUseAll_Pass"
                        :indeterminate="item.manualUseIndeterminate"
                        label="全部通过"
                        @change="(value: any) => handleCheckAll(value, item, item.manualUseScanning, 'manualUseScanning')"
                      />
                      <el-icon v-if="activeTab === 1"><ArrowDown /></el-icon>
                    </div>
                  </div>
                  <div class="child-container">
                    <div v-if="activeTab === 1">
                      <div v-for="(use, id) in item.useScanning" :key="id" class="child">
                        <div v-if="!use.Is_Manual_Processing" class="machine">
                          <div class="left" :style="`color: ${leftTextColor(use.FourAspect_Pass)}`">
                            <div class="child-item">{{ use.code }}</div>
                            <div class="child-item" :title="use.Verification_Item">{{ use.Verification_Item }}</div>
                            <div class="child-item" :title="use.Verification_Purpose">{{ use.Verification_Purpose }}</div>
                            <div class="child-item" :title="use.Verification_Target">{{ use.Verification_Target }}</div>
                          </div>
                          <div class="right">
                            <span v-if="use.FourAspect_Pass === 1" :style="`color: ${globalStore.primary}`">扫描中...</span>
                            <span v-if="use.FourAspect_Pass === 2" :style="`color: ${globalStore.primary}`">成功</span>
                            <span v-if="use.FourAspect_Pass === 3" style="color: #f56c6c">失败</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <div v-for="(u, i) in item.manualUseScanning" :key="i" class="child">
                        <div class="left" :style="`color: ${u.loading ? globalStore.primary : ''}`">
                          <div class="child-item">{{ u.code }}</div>
                          <div class="child-item" :title="u.Verification_Item">{{ u.Verification_Item }}</div>
                          <div class="child-item" :title="u.Verification_Purpose">{{ u.Verification_Purpose }}</div>
                          <div class="child-item" :title="u.Verification_Target">{{ u.Verification_Target }}</div>
                        </div>
                        <div class="right">
                          <el-checkbox
                            v-model="u.FourAspect_Pass"
                            label="通过"
                            :true-label="2"
                            :false-label="3"
                            @change="(value: any) => handleCheckboxChange(value, item, u, 'manualUseScanning')"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="big-class">
                  <div class="father">
                    <div class="father-title">
                      安全性检测<span v-show="(activeTab === 1 && item.securityScanningReqCount) || activeTab === 2">
                        - {{ activeTab === 1 ? item.securityScanningReqCount : item.manualSecurityScanning.length }}项</span
                      >
                      <span class="father-title_des">检测数据是否携带安全性病毒</span>
                    </div>
                    <div class="father-icon">
                      <el-checkbox
                        v-if="item.manualSecurityScanning.length && activeTab === 2"
                        v-model="item.ManualSecAll_Pass"
                        :indeterminate="item.manualSecIndeterminate"
                        label="全部通过"
                        @change="(value: any) => handleCheckAll(value, item, item.manualSecurityScanning, 'manualSecScanning')"
                      />
                      <el-icon v-if="activeTab === 1"><ArrowDown /></el-icon>
                    </div>
                  </div>
                  <div class="child-container">
                    <div v-if="activeTab === 1">
                      <div v-for="(sec, ix) in item.securityScanning" :key="ix" class="child">
                        <div v-if="!sec.Is_Manual_Processing" class="machine">
                          <div class="left" :style="`color: ${leftTextColor(sec.FourAspect_Pass)}`">
                            <div class="child-item">{{ sec.code }}</div>
                            <div class="child-item" :title="sec.Verification_Item">{{ sec.Verification_Item }}</div>
                            <div class="child-item" :title="sec.Verification_Purpose">{{ sec.Verification_Purpose }}</div>
                            <div class="child-item" :title="sec.Verification_Target">{{ sec.Verification_Target }}</div>
                          </div>
                          <div class="right">
                            <span v-if="sec.FourAspect_Pass === 1" :style="`color: ${globalStore.primary}`">扫描中...</span>
                            <span v-if="sec.FourAspect_Pass === 2" :style="`color: ${globalStore.primary}`">成功</span>
                            <span v-if="sec.FourAspect_Pass === 3" style="color: #f56c6c">失败</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <div v-for="(s, i) in item.manualSecurityScanning" :key="i" class="child">
                        <div class="left" :style="`color: ${s.loading ? globalStore.primary : ''}`">
                          <div class="child-item">{{ s.code }}</div>
                          <div class="child-item" :title="s.Verification_Item">{{ s.Verification_Item }}</div>
                          <div class="child-item" :title="s.Verification_Purpose">{{ s.Verification_Purpose }}</div>
                          <div class="child-item" :title="s.Verification_Target">{{ s.Verification_Target }}</div>
                        </div>
                        <div class="right">
                          <el-checkbox
                            v-model="s.FourAspect_Pass"
                            label="通过"
                            :true-label="2"
                            :false-label="3"
                            @change="(value: any) => handleCheckboxChange(value, item, s, 'manualSecScanning')"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      <div v-else class="default-wrap">
        <div class="left" :style="`color: ${globalStore.primary}`">
          <!-- <img src="@/assets/images/dun.png" alt="" /> -->
          <i class="iconfont icon-dunpai"></i>
        </div>
        <div class="right">
          <h3>四性检测，保护数据安全性</h3>
          <div class="des">专业检测，安全无忧</div>
          <div class="btn" :style="btnBg" @click="showMainHandle">开始四性检测</div>
        </div>
        <div class="default-bottom">
          <div class="default-item">
            <i class="iconfont icon-zhenshixing" :style="`color: ${globalStore.primary}`"></i><span>真实性检测</span>
          </div>
          <div class="default-item">
            <i class="iconfont icon-wanzhengxingguanli" :style="`color: ${globalStore.primary}`"></i><span>完整性检测</span>
          </div>
          <div class="default-item">
            <i class="iconfont icon-Availability" :style="`color: ${globalStore.primary}`"></i><span>可用性检测</span>
          </div>
          <div class="default-item">
            <i class="iconfont icon-anquanxing secu" :style="`color: ${globalStore.primary}`"></i><span>安全性检测</span>
          </div>
        </div>
      </div>
      <div v-if="!showMainBoard" class="close default-close" @click="emits('closeModal')">
        <el-icon><CircleCloseFilled /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useGlobalStore } from "@/stores/modules/global";
import CircleAnimate from "./CircleAnimate.vue";
import { useDraggable } from "./useDraggable";
import { lightenColor, circleThemeColor } from "./fourAspect";
import { getCurTime } from "@/utils/formatter";
import { useDynamicStore } from "@/stores/modules/dynamic";

const realSanning = ref<any[]>([]); // 真实性检测列表
const complateScanning = ref<any[]>([]); // 完整性检测列表
const useScanning = ref<any[]>([]); // 可用性检测列表
const securityScanning = ref<any[]>([]); // 安全性检测列表

const finishCount = ref<number>(0); // 完成检测的数量

const totalRequests = ref<number>(0); // 总请求数
const completedRequests = ref(0); // 用于跟踪已完成的请求数量

const showMainBoard = ref<boolean>(false); // 是否展示检测主面板

const activeTab = ref<number>(1); // 激活tab

const activeNames = ref(1); // 折叠面板展开值

const containerRef = ref(null); // 折叠面板容器

const afterHandleConfig = ref<any[]>([]); // 最终处理的配置

const showList = ref<any[]>([]); // 展示数组项

const elapsedTime = ref(0); // 计时器的时间（以秒为单位）

const timer = ref<any>(null); // 保存 setInterval 的 ID

const isRunning = ref(false); // 计时器是否正在运行

const progressTimer = ref<any>(null); // 进度计时器

const statusLinks = ref<any>(); // 当前检测环节

const stopReqFlag = ref<boolean>(false); // 停止检测

const dailycCheckedCount = ref(0); // 当天已检测的次数

const manualCheckAll = ref<boolean>(true); // 人工检测全选, 默认全部通过

const manualCheckIndeterminate = ref<boolean>(false); // 人工检测复选框半选状态

const globalStore = useGlobalStore();
// 使用拖拽 hook
const { content, startDrag, stopDrag, drag } = useDraggable();
const route = useRoute();

statusLinks.value = route.query.status;
const userInfo = JSON.parse(window.sessionStorage.getItem("user") as string).userInfo;

const props = defineProps({
  fourAspectConfigs: {
    type: Array,
    default: () => {
      return [];
    }
  },
  fourAspectRow: {
    type: Object,
    default: () => {
      return {};
    }
  },
  curFourAspectItem: {
    type: Object,
    default: () => {
      return {};
    }
  },
  allFinish: {
    type: Boolean,
    default: false
  },
  activeIndex: {
    type: Number,
    default: 1
  },
  selectedCount: {
    type: Number,
    default: 0
  }
});

const emits = defineEmits(["startCheck", "closeModal", "stopCheck"]);

const { proxy } = useCurrentInstance();
const dynamicStore = useDynamicStore();

// 初始化构建对象（包含构建对象，字段规则等等）
const { visibleConfig } = dynamicStore;

const showMainHandle = () => {
  stopReqFlag.value = false;
  showMainBoard.value = true;
  updateCount();
  emits("startCheck");
};

// 过滤出 Is_Manual_Processing 为 true 的项
const filterManualProcessingItems = (arr: any) => {
  return arr.filter((item: any) => item.Is_Manual_Processing);
};

// 切换tab函数
const changeTab = (tab: number) => {
  activeTab.value = tab;
};

// 滚动操作
const scrollToHandle = (type: string = "bottom") => {
  const element: any = containerRef.value;
  if (element) {
    if (type === "bottom") {
      element.scrollTop = element.scrollHeight;
    } else {
      element.scrollTop = 0; // 滚回顶部
    }
  }
};

watchEffect(() => {
  // 折叠面板变量监听
  activeNames.value = props.activeIndex;
});

// 监听是否全部检测完毕
watchEffect(() => {
  if (props.allFinish && !stopReqFlag.value && showMainBoard.value) {
    finishCount.value = 100;
    scrollToHandle("top");
    localStorage.setItem("fourAspectCheckTime", getCurTime()); // 把该次检测完成的时间记下来

    // 次数加1
    const storedCheckedCount = localStorage.getItem("checkCount") || 0;
    dailycCheckedCount.value = Number(storedCheckedCount) + 1;
    localStorage.setItem("checkCount", dailycCheckedCount.value.toString()); // 存储次数
  }
});

// 用于检测是否含有失败项
const failureFlag = (item: any) => {
  return (
    item.realSanningFailureCount ||
    item.complateScanningFailureCount ||
    item.useScanningFailureCount ||
    item.securityScanningFailureCount
  );
};

// 进度条颜色
const barStyle = computed(() => {
  return {
    background: `linear-gradient(90deg, ${lightenColor(globalStore.primary, 0.2)}, ${globalStore.primary})`,
    boxShadow: `0 0 10px ${globalStore.primary}`,
    width: `${finishCount.value}%`
  };
});

// 加载动画
const loadingStyle = computed(() => {
  return {
    borderTop: `2px solid ${globalStore.primary}`,
    borderRight: `2px solid ${globalStore.primary}`
  };
});

// 阶段颜色
const stagesColor = computed(() => {
  return {
    color: globalStore.primary,
    borderColor: globalStore.primary
  };
});

// 大模型三角颜色
const vectorBg = computed(() => {
  return {
    borderColor: `transparent ${globalStore.primary} transparent transparent`
  };
});

// 默认界面背景颜色
const btnBg = computed(() => {
  return {
    // background: `linear-gradient(120deg, #439a47, ${lightenColor(globalStore.primary, 0)})`
    background: circleThemeColor(globalStore.primary)
  };
});

// 头部背景颜色
const headerBg = computed(() => {
  return {
    background: `linear-gradient(120deg, #e0f2f1, ${lightenColor(globalStore.primary, 0.3)})`
  };
});

// 标题颜色
const titleColor = computed(() => {
  return {
    color: globalStore.primary,
    background: `${lightenColor(globalStore.primary, 0.3)})`
  };
});

// 格式化时间为 HH:MM:SS
const formattedTime = computed(() => {
  const hours = String(Math.floor(elapsedTime.value / 3600)).padStart(2, "0");
  const minutes = String(Math.floor((elapsedTime.value % 3600) / 60)).padStart(2, "0");
  const seconds = String(elapsedTime.value % 60).padStart(2, "0");
  return `${hours}:${minutes}:${seconds}`;
});

// 对比是否还是当天，如果已经是第2天，则已检测数置为0
const updateCount = () => {
  const today = new Date().toLocaleDateString(); // 获取当前日期
  const storedDate = localStorage.getItem("lastCheckedDate");
  let storedCount = parseInt(localStorage.getItem("checkCount") || "0") || 0;

  // 如果当前日期和存储的日期不一致，重置次数
  if (storedDate !== today) {
    storedCount = 0;
    localStorage.setItem("checkCount", "0"); // 非同一天已检测次数置为0
    localStorage.setItem("lastCheckedDate", today); // 更新存储的日期为今天
  }

  dailycCheckedCount.value = storedCount; // 赋值已经检测的次数
};

// 点击扫描页面的关闭按钮
const closeHandle = () => {
  stopReqFlag.value = true;
  emits("stopCheck");
  emits("closeModal");
};

// 停止扫描、重新扫描
const scaningHandle = () => {
  if (finishCount.value === 100) return; // 说明此时是正常检测完毕
  stopReqFlag.value = !stopReqFlag.value;
  console.log("stopReqFlag.value---", stopReqFlag.value);
  if (stopReqFlag.value) {
    pauseTimer();
    stopReqFlag.value = true;
    clearInterval(progressTimer.value);
    progressTimer.value = null;
    emits("stopCheck");
  } else {
    resetTimer();
    startTimer();
    finishCount.value = 0; // 进度条复位
    startProgress();
    afterHandleConfig.value = []; // 重新扫描需要重新初始化处理之后的配置数组
    showList.value = []; // 恢复初始值
    updateCount();
    emits("startCheck");
  }
};

// 开始计时
const startTimer = () => {
  if (!timer.value) {
    isRunning.value = true;
    timer.value = setInterval(() => {
      elapsedTime.value += 1;
    }, 1000);
  }
};

// 暂停计时
const pauseTimer = () => {
  clearInterval(timer.value);
  timer.value = null;
  isRunning.value = false;
};

// 重置计时
const resetTimer = () => {
  pauseTimer();
  elapsedTime.value = 0;
};

// 扫描过程中左边的字体颜色
const leftTextColor = (status: any) => {
  return status === 3 ? "#f56c6c" : status === 1 ? globalStore.primary : "";
};

// 按阶段分类
const stageHandle = () => {
  switch (route.query.status) {
    case "Collect":
      realSanning.value = realSanning.value.filter((item: any) => item.FourAspect_stages === "归档环节" && item.enable);
      complateScanning.value = complateScanning.value.filter((item: any) => item.FourAspect_stages === "归档环节" && item.enable);
      useScanning.value = useScanning.value.filter((item: any) => item.FourAspect_stages === "归档环节" && item.enable);
      securityScanning.value = securityScanning.value.filter((item: any) => item.FourAspect_stages === "归档环节" && item.enable);
      break;
    case "Arrangement":
      realSanning.value = realSanning.value.filter((item: any) => item.FourAspect_stages === "移交与接收环节" && item.enable);
      complateScanning.value = complateScanning.value.filter(
        (item: any) => item.FourAspect_stages === "移交与接收环节" && item.enable
      );
      useScanning.value = useScanning.value.filter((item: any) => item.FourAspect_stages === "移交与接收环节" && item.enable);
      securityScanning.value = securityScanning.value.filter(
        (item: any) => item.FourAspect_stages === "移交与接收环节" && item.enable
      );
      break;
    case "Storage":
      realSanning.value = realSanning.value.filter((item: any) => item.FourAspect_stages === "长期保存环节" && item.enable);
      complateScanning.value = complateScanning.value.filter(
        (item: any) => item.FourAspect_stages === "长期保存环节" && item.enable
      );
      useScanning.value = useScanning.value.filter((item: any) => item.FourAspect_stages === "长期保存环节" && item.enable);
      securityScanning.value = securityScanning.value.filter(
        (item: any) => item.FourAspect_stages === "长期保存环节" && item.enable
      );
    default:
      break;
  }
};

// 所有人工检测数据全选操作
const manualCheckAllHandle = () => {
  manualCheckIndeterminate.value = false; // 半选关闭
  showList.value.forEach((item: any) => {
    item.itemAllIndeterminate = false; // 选择的时候关闭半选状态
    item.manualComplIndeterminate = false; // 子项半选状态更改
    item.manualUseIndeterminate = false;
    item.manualSecIndeterminate = false;
    item.manualRealIndeterminate = false;
    const { manualRealSanning, manualComplateScanning, manualUseScanning, manualSecurityScanning } = item;
    const allManualItemList = [...manualRealSanning, ...manualComplateScanning, ...manualUseScanning, ...manualSecurityScanning];
    allManualItemList.forEach((manualItem: any) => {
      if (manualCheckAll.value) {
        item.itemAll_Pass = true;
        manualItem.FourAspect_Pass = 2;
        item.ManualRealAll_Pass = true;
        item.ManuaComplAll_Pass = true;
        item.ManualUseAll_Pass = true;
        item.ManualSecAll_Pass = true;
      } else {
        item.itemAll_Pass = false;
        manualItem.FourAspect_Pass = 3;
        item.ManualRealAll_Pass = false;
        item.ManuaComplAll_Pass = false;
        item.ManualUseAll_Pass = false;
        item.ManualSecAll_Pass = false;
      }
    });
  });
};

// 所有检测项选中状态
const allChildItemCheckStatusHandle = () => {
  // 只判断每一项检测数据的四个阶段全选状态
  const allPassStatus = showList.value.filter(
    (item: any) =>
      (item.manualRealSanning.length && !item.ManualRealAll_Pass) ||
      (item.manualComplateScanning.length && !item.ManuaComplAll_Pass) ||
      (item.manualUseScanning.length && !item.ManualUseAll_Pass) ||
      (item.manualSecurityScanning.length && !item.ManualSecAll_Pass)
  );
  const hasItemAllIndeterminate = allPassStatus.filter((item: any) => item.itemAllIndeterminate);
  console.log("最外层全选状态-----", allPassStatus);
  if (!allPassStatus.length) {
    manualCheckIndeterminate.value = false; // 半选关闭
    manualCheckAll.value = true;
    return;
  }
  if (hasItemAllIndeterminate.length) {
    // 只要有一项数据全选状态是半选，则全局就是半选
    manualCheckAll.value = false;
    manualCheckIndeterminate.value = true;
    return;
  }
  if (allPassStatus.length && allPassStatus.length !== showList.value.length) {
    manualCheckAll.value = false;
    manualCheckIndeterminate.value = true; // 半选开启
    return;
  }
  if (allPassStatus.length === showList.value.length) {
    manualCheckAll.value = false;
    manualCheckIndeterminate.value = false; // 半选关闭
  }
};

// 在扫描过程中、人工检测每一项判断当前全局选中框是否已经是选中状态
const allChildCheckedHandle = (arr: any) => {
  arr.forEach((item: any) => {
    const { manualRealSanning, manualComplateScanning, manualUseScanning, manualSecurityScanning } = item;
    const allManualItemList = [...manualRealSanning, ...manualComplateScanning, ...manualUseScanning, ...manualSecurityScanning];
    allManualItemList.forEach((listItem: any) => {
      if (manualCheckIndeterminate.value) return;
      if (manualCheckAll.value) {
        item.itemAll_Pass = true;
        item.ManualRealAll_Pass = true;
        item.ManuaComplAll_Pass = true;
        item.ManualUseAll_Pass = true;
        item.ManualSecAll_Pass = true;
        listItem.FourAspect_Pass = 2;
      } else {
        item.itemAll_Pass = false;
        item.ManualRealAll_Pass = false;
        item.ManuaComplAll_Pass = false;
        item.ManualUseAll_Pass = false;
        item.ManualSecAll_Pass = false;
        listItem.FourAspect_Pass = 3;
      }
    });
  });
};

// 需要检测数据项的全选
const handleItemCheckAll = (val: any, item: any, e: any) => {
  e.stopPropagation(); // 阻止事件冒泡
  item.itemAllIndeterminate = false; // 选择的时候关闭半选状态
  item.manualComplIndeterminate = false; // 子项半选状态更改
  item.manualUseIndeterminate = false;
  item.manualSecIndeterminate = false;
  item.manualRealIndeterminate = false;

  item.itemAll_Pass = val; // 单项数据选择框的全选框
  item.ManuaComplAll_Pass = val;
  item.ManualUseAll_Pass = val;
  item.ManualSecAll_Pass = val;
  item.ManualRealAll_Pass = val;

  const allManual = [
    ...item.manualRealSanning,
    ...item.manualComplateScanning,
    ...item.manualUseScanning,
    ...item.manualSecurityScanning
  ];
  allManual.forEach((item: any) => {
    item.FourAspect_Pass = val ? 2 : 3;
  });

  allChildItemCheckStatusHandle(); // 每个大的Item项调用一下
};

// 人工检测子项全选框
const handleCheckAll = (val: any, fatherItem: any, childItem: any, type: string) => {
  console.log("全选", val);
  fatherItem.itemAllIndeterminate = true;
  if (type == "manualComplateScanning") {
    fatherItem.ManuaComplAll_Pass = val; // 全选框赋值
    fatherItem.manualComplIndeterminate = false; // 半选状态
  } else if (type == "manualUseScanning") {
    fatherItem.ManualUseAll_Pass = val; // 全选框赋值
    fatherItem.manualUseIndeterminate = false;
  } else if (type == "manualSecScanning") {
    fatherItem.ManualSecAll_Pass = val; // 全选框赋值
    fatherItem.manualSecIndeterminate = false;
  } else {
    fatherItem.ManualRealAll_Pass = val; // 全选框赋值
    fatherItem.manualRealIndeterminate = false;
  }
  childItem.forEach((item: any) => {
    item.FourAspect_Pass = val ? 2 : 3;
  });

  singleItemCheckAllHandle(fatherItem);

  allChildItemCheckStatusHandle(); // 每个子项调用一下
};

// 人工检测单个选项框
const handleCheckboxChange = (val: any, fatherItem: any, childItem: any, type: string) => {
  childItem.FourAspect_Pass = val; // 单个子项赋值
  fatherItem.itemAllIndeterminate = true; // 单个数据最外层半选状态
  if (type == "manualComplateScanning") {
    fatherItem.manualComplIndeterminate = true;
    fatherItem.ManuaComplAll_Pass = fatherItem.manualComplateScanning.every((subItem: any) => subItem.FourAspect_Pass === 2);
    const hasCheckedItems = fatherItem.manualComplateScanning.filter((subItem: any) => subItem.FourAspect_Pass === 2);
    if (fatherItem.ManuaComplAll_Pass) {
      // 校验子项是否全部选择了
      fatherItem.manualComplIndeterminate = false;
    }
    if (!hasCheckedItems.length) {
      // 是否含有已勾选项
      fatherItem.manualComplIndeterminate = false;
    }
  } else if (type == "manualUseScanning") {
    fatherItem.manualUseIndeterminate = true;
    fatherItem.ManualUseAll_Pass = fatherItem.manualUseScanning.every((subItem: any) => subItem.FourAspect_Pass === 2);
    const hasCheckedItems = fatherItem.manualUseScanning.filter((subItem: any) => subItem.FourAspect_Pass === 2);
    if (fatherItem.ManualUseAll_Pass) {
      // 校验子项是否全部选择了
      fatherItem.manualUseIndeterminate = false;
    }
    if (!hasCheckedItems.length) {
      // 是否含有已勾选项
      fatherItem.manualUseIndeterminate = false;
    }
  } else if (type == "manualSecScanning") {
    fatherItem.manualSecIndeterminate = true;
    fatherItem.ManualSecAll_Pass = fatherItem.manualSecurityScanning.every((subItem: any) => subItem.FourAspect_Pass === 2);
    const hasCheckedItems = fatherItem.manualSecurityScanning.filter((subItem: any) => subItem.FourAspect_Pass === 2);
    if (fatherItem.ManualSecAll_Pass) {
      // 校验子项是否全部选择了
      fatherItem.manualSecIndeterminate = false;
    }
    if (!hasCheckedItems.length) {
      // 是否含有已勾选项
      fatherItem.manualSecIndeterminate = false;
    }
  } else {
    fatherItem.manualRealIndeterminate = true;
    fatherItem.ManualRealAll_Pass = fatherItem.manualRealSanning.every((subItem: any) => subItem.FourAspect_Pass === 2);
    const hasCheckedItems = fatherItem.manualRealSanning.filter((subItem: any) => subItem.FourAspect_Pass === 2);
    if (fatherItem.ManualRealAll_Pass) {
      // 校验子项是否全部选择了
      fatherItem.manualRealIndeterminate = false;
    }
    if (!hasCheckedItems.length) {
      // 是否含有已勾选项
      fatherItem.manualRealIndeterminate = false;
    }
  }

  // 每一项选择完之后需要判断是否已经全部是选中状态
  singleItemCheckAllHandle(fatherItem);

  allChildItemCheckStatusHandle(); // 每个单项调用一下
};

// 每项数据的全选处理
const singleItemCheckAllHandle = (fatherItem: any) => {
  const allManual = [
    ...fatherItem.manualRealSanning,
    ...fatherItem.manualComplateScanning,
    ...fatherItem.manualUseScanning,
    ...fatherItem.manualSecurityScanning
  ];

  fatherItem.itemAll_Pass = allManual.every((subItem: any) => subItem.FourAspect_Pass === 2);
  const hasCheckedItems = allManual.filter((subItem: any) => subItem.FourAspect_Pass === 2);
  if (fatherItem.itemAll_Pass || !hasCheckedItems.length) {
    fatherItem.itemAllIndeterminate = false;
  }
};

// 检测配置处理，对配置进行归类，方便界面按类展示
const configHandle = () => {
  realSanning.value = []; // 清空
  complateScanning.value = [];
  useScanning.value = [];
  securityScanning.value = [];

  props.fourAspectConfigs.forEach((conf: any) => {
    if (conf.FourAspect_Class === "真实性检测") {
      realSanning.value.push(conf);
    } else if (conf.FourAspect_Class === "完整性检测") {
      complateScanning.value.push(conf);
    } else if (conf.FourAspect_Class === "可用性检测") {
      useScanning.value.push(conf);
    } else {
      securityScanning.value.push(conf);
    }
  });

  stageHandle(); // 分出阶段

  afterHandleConfig.value.push({
    code: props.curFourAspectItem.Code,
    title: props.curFourAspectItem.Title,
    realSanning: realSanning.value, // 真实性
    complateScanning: complateScanning.value, // 完整性检测
    useScanning: useScanning.value, // 可用性检测
    securityScanning: securityScanning.value // 安全性检测
  });

  console.log("最终处理的数组-----", afterHandleConfig.value);
};

// *************** 此次请求 开始 ******************

// 模拟接口请求
const mockApiCall = (item: any) =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      if (item.DefValue) {
        console.error(`请求失败: ${item.code} (DefValue 为 true)`);
        reject(new Error(`请求失败: ${item.code} (DefValue 为 true)`));
      } else {
        resolve(1); // 暂时都归结为成功
        // 随机生成 0 到 1 之间的数字，模拟失败的几率
        // const isSuccess = Math.random() > 0.2; // 80% 请求成功，20% 请求失败
        // if (isSuccess) {
        //   console.log(`请求完成: ${item.code}`);
        //   resolve(1);
        // } else {
        //   console.error(`请求失败: ${item.code}`);
        //   reject(new Error(`请求失败: ${item.code}`));
        // }
      }
    }, 1000); // 模拟 1000ms 的请求延迟
  });

// 顺序处理单个数组
const processArray = async (key: string, arr: any) => {
  // 先过滤出 Is_Manual_Processing 为 true 的项，用于后续特殊处理
  const manualItems = filterManualProcessingItems(arr);
  const regularItems = arr.filter((item: any) => !item.Is_Manual_Processing);

  // 计数器：请求的数量和失败的数量
  let reqCount = 0;
  let failureCount = 0;

  // 处理手动的项
  for (const item of manualItems) {
    // 直接将手动项添加到 showList 中，不需要发起请求
    showList.value[showList.value.length - 1][key].push(item);
  }
  allChildCheckedHandle(showList.value); // 执行判断一下全局的人工检测选中状态
  const currentIndex = showList.value.length - 1; // 拿到当前下标
  // 先初始化一下计数，以防停止检测或者全部成功没有失败的情况
  showList.value[currentIndex][`${key}ReqCount`] = 0;
  showList.value[currentIndex][`${key}FailureCount`] = 0;
  // 处理普通的项（非手动项）
  for (const item of regularItems) {
    if (!item.FourAspect_Pass && !stopReqFlag.value) {
      item.FourAspect_Pass = 1; // 标记开始请求，1、显示加载态 2、成功 3、失败
      showList.value[showList.value.length - 1][key].push(item);
      nextTick(() => {
        scrollToHandle("bottom");
      });
      try {
        reqCount += 1; // 请求计数
        showList.value[currentIndex][`${key}ReqCount`] = reqCount; // 添加成功计数
        await mockApiCall(item); // 发起请求
        item.FourAspect_Pass = 2; // 标记请求完成且成功
      } catch (error: any) {
        item.FourAspect_Pass = 3; // 请求失败
        failureCount++; // 失败计数
        showList.value[currentIndex][`${key}FailureCount`] = failureCount;
        console.error(`处理 ${item.code} 时出错:`, error.message);
      }
    }
  }
  console.log("showList.value计数-----", showList.value);
};

// 顺序处理配置数组中的单个对象
const processSingleObject = async (testObj: any) => {
  if (testObj.loading || stopReqFlag.value) return; // 如果已在处理中，直接返回

  testObj.loading = true; // 标记父级加载中
  console.log(`开始处理对象: ${testObj}`);

  showList.value.push({
    title: testObj.title,
    outLoading: true,
    code: testObj.code
  });

  // 顺序处理四个数组
  const arrays = [
    { key: "realSanning", value: testObj.realSanning },
    { key: "complateScanning", value: testObj.complateScanning },
    { key: "useScanning", value: testObj.useScanning },
    { key: "securityScanning", value: testObj.securityScanning }
  ];

  // 为手动处理的项创建新的字段
  const manualArrays = [
    { key: "manualRealSanning", value: filterManualProcessingItems(testObj.realSanning) },
    { key: "manualComplateScanning", value: filterManualProcessingItems(testObj.complateScanning) },
    { key: "manualUseScanning", value: filterManualProcessingItems(testObj.useScanning) },
    { key: "manualSecurityScanning", value: filterManualProcessingItems(testObj.securityScanning) }
  ];

  // 将手动处理项存储到 showList 中
  const currentIndex = showList.value.length - 1;
  manualArrays.forEach(({ key, value }) => {
    showList.value[currentIndex][key] = value; // 归类手动处理项
  });

  // 初始化 showList 的当前对象属性为空数组
  arrays.forEach(({ key }) => {
    showList.value[currentIndex][key] = []; // 确保每个 key 都有一个初始空数组
  });

  // 处理每个数组
  for (const { key, value } of arrays) {
    // 处理当前数组
    await processArray(key, value);
  }

  testObj.loading = false; // 标记父级完成
  showList.value[showList.value.length - 1]["outLoading"] = false;
  console.log(`对象处理完成: ${testObj.title}`);

  // 检测完毕之后避免重复入库拿最后一项入库
  const {
    realSanning,
    manualRealSanning,
    complateScanning,
    manualComplateScanning,
    useScanning,
    manualUseScanning,
    securityScanning,
    manualSecurityScanning,
    // 以下为失败的字段
    realSanningFailureCount = 0,
    complateScanningFailureCount = 0,
    useScanningFailureCount = 0,
    securityScanningFailureCount = 0
  } = showList.value[showList.value.length - 1];
  // 机检失败总数
  const totalMathineFailCount =
    realSanningFailureCount + complateScanningFailureCount + useScanningFailureCount + securityScanningFailureCount;
  // 四性检测结果入库
  addAspectCheckResult(totalMathineFailCount, showList.value[showList.value.length - 1]);
  // 调用入库函数
  addSanningResult([
    ...realSanning.filter((item: any) => !item.Is_Manual_Processing), // 非人工
    ...manualRealSanning,
    ...complateScanning.filter((item: any) => !item.Is_Manual_Processing), // 非人工
    ...manualComplateScanning,
    ...useScanning.filter((item: any) => !item.Is_Manual_Processing), // 非人工
    ...manualUseScanning,
    ...securityScanning.filter((item: any) => !item.Is_Manual_Processing), // 非人工
    ...manualSecurityScanning
  ]);
};

// 处理整个 test 数组（通过标记判断是否处理过）
const processObjArray = async (testArray: any) => {
  for (const testObj of testArray) {
    if (!testObj.processed && !stopReqFlag.value) {
      // 仅处理未标记的对象
      await processSingleObject(testObj);
      testObj.processed = true; // 标记为已处理
    }
  }
  console.log("所有未处理对象已完成处理！");
};

// **************** 此次请求 结束 *****************

const checkId = (arr: any, id: string) => {
  const exitId = arr.filter((item: any) => item.FA_ID == id);
  console.log("exitId----", exitId);
  if (exitId.length) {
    return checkId(arr, proxy.$global.createID());
  }
  return id;
};

// 人工检测未勾选通过数量
const notCheckPass = (item: any) => {
  const realCheckNotPass = item.manualRealSanning.filter((item: any) => item.FourAspect_Pass !== 2);
  const complateCheckNotPass = item.manualComplateScanning.filter((item: any) => item.FourAspect_Pass !== 2);
  const useCheckNotPass = item.manualUseScanning.filter((item: any) => item.FourAspect_Pass !== 2);
  const secCheckNotPass = item.manualSecurityScanning.filter((item: any) => item.FourAspect_Pass !== 2);
  return realCheckNotPass.length + complateCheckNotPass.length + useCheckNotPass.length + secCheckNotPass.length;
};

// 上次检测时间
const lastCheckTime = () => {
  const localChecktime = localStorage.getItem("fourAspectCheckTime") || "";
  return localChecktime ? localChecktime : "暂无检测记录";
};

// 四性检测结果入库
const addAspectCheckResult = (count: number, obj: any) => {
  const manualCheckFailCount = notCheckPass(obj); // 人工检测未通过数量
  // 解构并去掉 checkbox 属性
  const { checkbox, ...curItemWithoutCheckbox } = props.curFourAspectItem;

  const param = {
    list: [{ ...curItemWithoutCheckbox, FourAspect_Pass: count + manualCheckFailCount ? 3 : 2 }],
    tableName: visibleConfig.FMT.FMT_TableName
  };
  proxy.$vueAxios.put("Dynamic", param).then((res: any) => {
    if (res.Mark) {
      dynamicStore.updateTableData(res.List[0]);
    }
  });
};

// 存储检测记录
const addSanningResult = (arr: any) => {
  arr.forEach((item: any) => {
    item.FA_ID = proxy.$global.createID();
    item.Recod_ID = props.fourAspectRow.Record_ID;
    item.FourAspect_Tester = userInfo.U_Name;
    item.Create_DateTime = getCurTime();
  });
  proxy.$vueAxios.post("/Master_Base_FourAspect/AddList", [...arr]).then((res: any) => {
    console.log("检测记录入数据库-----", res);
  });
};

// 模拟进度条假性叠加
const startProgress = () => {
  //  根据给定的总数字初始化进度
  const maxProgress = 99; // 固定最终进度为99
  const { complateScanning = [], realSanning = [], securityScanning = [], useScanning = [] } = afterHandleConfig.value[0];
  const totalValue =
    (complateScanning.length + realSanning.length + securityScanning.length + useScanning.length) * props.selectedCount; // 如果没有传递 total，则默认为100
  // 根据总数和最终目标计算每次的增量比例
  const incrementPerStep = maxProgress / totalValue;

  // 立即执行一次加1的增量
  if (finishCount.value < maxProgress) {
    finishCount.value += 1;
  }

  progressTimer.value = setInterval(() => {
    if (stopReqFlag.value) {
      clearInterval(progressTimer.value);
      progressTimer.value = null;
      return;
    }

    if (finishCount.value < maxProgress) {
      // 匀速增量
      finishCount.value += Math.round(incrementPerStep);

      // 确保不会超过99
      if (finishCount.value > maxProgress) {
        finishCount.value = maxProgress;
      }
    } else {
      clearInterval(progressTimer.value); // 达到99时停止叠加
    }
  }, 3000); // 每500ms更新一次进度
};

const checkHandle = async () => {
  if (props.fourAspectConfigs.length) {
    // 先处理检测配置项
    configHandle();
    startTimer();
    startProgress();
    // 开始处理请求
    console.log("afterHandleConfig.value----", afterHandleConfig.value);
    await processObjArray(afterHandleConfig.value);
  }
};

onMounted(() => {
  finishCount.value = 0;
});

defineExpose({
  checkHandle,
  pauseTimer
});
</script>

<style>
.aspect-pop {
  z-index: 10001 !important;
  width: 108px !important;
  min-width: auto !important;
  padding: 4px 6px !important;
  margin-left: 20px;
  text-align: center !important;
}
</style>

<style lang="scss" scoped>
.four-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 50%);
}
.four-scan {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 80vw;

  // height: 843px;
  height: 88vh;

  // height: 80vh;
  // background-color: #fff;
  background-color: var(--el-bg-color);
  transform: translate(-50%, -50%);
  .checking {
    width: 100%;
    height: 100%;
  }
  .default-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    .left {
      margin-top: -90px;
      .icon-dunpai {
        font-size: 300px;
      }
    }
    .right {
      margin: -90px 0 0 80px;
      h3 {
        margin: 0;
        font-size: 56px;
      }
      .des {
        margin: 20px 0 60px;
        font-size: 20px;
      }
      .btn {
        width: 360px;
        height: 80px;
        margin-top: 40px;
        font-size: 40px;
        line-height: 74px;
        color: #ffffff;
        text-align: center;
        cursor: pointer;
        background-color: pink;
        border-radius: 50px;
      }
    }
    .default-bottom {
      position: absolute;
      bottom: 30px;
      left: 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 40px 80px;
      .default-item {
        display: flex;
        align-items: center;
        padding: 25px 40px;
        font-size: 18px;
        cursor: pointer;
        border-radius: 4px;
        box-shadow: 0 6px 15px rgb(0 0 0 / 10%), 0 16px 30px rgb(0 0 0 / 10%);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        span {
          margin-left: 10px;
        }
        i {
          font-size: 30px;
        }
        .secu {
          font-weight: 900;
        }
        .icon-wanzhengxingguanli {
          font-size: 35px;
        }
        &:hover {
          box-shadow: 0 10px 20px rgb(0 0 0 / 15%), 0 20px 40px rgb(0 0 0 / 20%);
          transform: translateY(-8px);
        }
      }
    }
  }
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 25px;
    color: #ffffff;
  }
  .default-close {
    color: #666666;
  }
  .header {
    position: relative;
    display: flex;

    // width: calc(100% - 40px);
    padding: 20px 20px 10px;
    font-family: Arial, sans-serif;
    background: linear-gradient(120deg, #e0f2f1, #b2dfdb); /* 修改为绿色系渐变 */
    img {
      width: 100px;
    }
    .icon-dunpai {
      font-size: 116px;
    }
    .right {
      width: 64%;
      margin-left: 30px;
      &-top {
        display: flex;
        align-items: center;
        .line {
          width: 14px;
          margin: 0 6px;
          border-top: 2px solid var(--el-color-primary);
        }
        .modal {
          font-size: 20px;
          color: var(--el-color-primary);
        }
      }
    }
    .title {
      position: relative;
      font-size: 38px;
      font-weight: bold;
      color: #009688; /* 修改为绿色 */

      // -webkit-text-fill-color: transparent;
      text-shadow: 1px 1px 2px rgb(0 0 0 / 20%), 3px 3px 5px rgb(0 0 0 / 15%);
      text-transform: uppercase;
      background: linear-gradient(90deg, #80cbc4, #009688, #00796b); /* 修改为绿色系渐变 */
      background-clip: text;
      &::after {
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: -1;
        width: 100%;
        height: 100%;
        content: "";
        background: linear-gradient(90deg, rgb(255 255 255 / 80%), rgb(255 255 255 / 10%));
        filter: blur(4px);
        border-radius: 5px;
      }
    }
    .small-title {
      display: flex;
      align-items: center;
      margin-top: 12px;
      font-size: 18px;
      color: #009688; /* 修改为绿色 */
      .title-item {
        margin-right: 30px;
      }
    }
    .current-item {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 12px;
      font-size: 15px;
      color: #009688;
      .cur-title {
        max-width: 86%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      span {
        margin-left: 12px;
      }
      .vector {
        position: relative;
        padding: 2px 8px;
        margin-left: 20px;
        border: 1px solid #009688;
        border-radius: 4px;
        fontsize: 14px;
        .triangle {
          position: absolute;
          top: 50%;
          left: -9px;
          width: 0;
          height: 0;
          border-color: transparent #009688 transparent transparent;
          border-style: solid;
          border-width: 6px 8px 6px 0;
          transform: translateY(-50%);
        }
      }
    }
    .check-tab {
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: flex;
      align-items: center;
      .tab-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4px 12px;
        font-size: 16px;
        color: #ffffff;
        cursor: pointer;
        .icon-xitongguanli,
        .icon-rengongjiance {
          margin-right: 6px;
          font-size: 16px;
        }
        .line {
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 84%;
          height: 1px;
          margin-top: 4px;
          background-color: #ffffff;
          transform: translateX(-50%);
        }
      }
      .divider {
        width: 2px;
        height: 16px;
        background-color: #ffffff;
      }
    }
    .stop-btn {
      position: absolute;
      top: 70px;
      right: 22px;
      display: flex;
      align-items: center;
      .time {
        font-size: 15px;
        color: #ffffff;
      }
      .stop-san {
        padding: 4px 16px;
        margin-left: 20px;
        font-size: 14px;
        color: #ffffff;
        cursor: pointer;
        border: 1px solid #ffffff;
        border-radius: 50px;
      }
    }
  }
  .scan-container {
    display: flex;
    width: 100%;
    height: calc(100% - 175px);
    .scan-animate {
      position: relative;

      // margin-left: 20px;
      display: flex;
      align-items: center;
      width: 590px;

      // min-height: 672px;
      .stages {
        position: absolute;
        bottom: 40px;
        left: 50%;

        // padding-top: 60px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        padding: 50px 20px 20px;
        border-top: 4px solid #f5f5f5;
        transform: translateX(-50%);
        &-item {
          display: flex;
          align-items: center;
          padding: 15px 20px;
          font-size: 25px;

          // border: 1px solid;
          text-transform: uppercase;
          letter-spacing: 2px;
          border-radius: 4px;

          // box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1), 0 16px 30px rgba(0, 0, 0, 0.1);
          i {
            margin-right: 8px;
            font-size: 30px;
          }
          .icon-guidang {
            font-size: 32px;
          }
        }
        .footer {
          display: flex;
          align-items: center;
          .icon-jiancelishi {
            margin-right: 8px;
            font-size: 32px;
          }
          .right {
            .his {
              font-size: 16px;
              line-height: 25px;
            }
          }
        }
      }
    }
    .item-wrapper {
      box-sizing: border-box;

      // margin-left: 20px;
      // width: calc(100% - 650px);
      flex: 1;
      height: 100%;
      padding-left: 10px;
      overflow-y: scroll;
      border-left: 4px solid #f5f5f5;
      .collapse {
        display: flex;
        align-items: center;
        width: 95%;
        &-title {
          // width: 100%;
          position: relative;
          display: flex;
          margin-left: 8px;
          font-size: 15px;
          .title-left {
            // max-width: 410px;
            max-width: 36%;
            margin-right: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .checkPart {
            position: absolute;
            top: 50%;
            right: -102px;
            display: flex;
            transform: translateY(-50%);
          }
          :deep(.el-checkbox--large) {
            height: auto;
            margin-left: 20px;
            .el-checkbox__inner {
              margin-top: 2px;
            }
            .el-checkbox__label {
              margin-left: 0;
              font-size: 15px;
            }
          }
        }
      }
      .big-class {
        margin-left: 10px;
        .father {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20px;
          font-size: 14px;
          .father-title_des {
            margin-left: 28px;
            font-size: 13px;
            color: #c3b4b4;
          }
          .father-icon {
            margin-right: 9px;
          }
        }
        &:first-child {
          .father {
            margin-top: 6px;
          }
        }
        .child-container {
          // max-height: 100px;
          // overflow-y: scroll;
          font-size: 12px;
        }
        .child {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .machine {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
            opacity: 0;
            transform: translateY(-10px);
            animation: fade-in 0.5s ease-in-out forwards;
          }
          @keyframes fade-in {
            0% {
              opacity: 0;
              transform: translateY(-10px);
            }
            100% {
              opacity: 1;
              transform: translateY(0);
            }
          }
          .left {
            display: flex;
            align-items: center;
            max-width: 88%;
          }
          &-item {
            min-width: 50px;
            max-width: 270px;
            margin-right: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .right {
            margin-right: 12px;
          }
        }
      }
      .item-container {
        .item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 2px;
          margin-top: 12px;
          font-size: 17px;
          cursor: pointer;
          border-bottom: 1px solid #e0e0e0;
          box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
          .left {
            display: flex;
            align-items: center;
            .scan-flag {
              display: flex;
              font-size: 19px;
              .warning {
                color: #f57c00; /* 修改为橙色 */
              }
              .successing {
                color: #388e3c; /* 修改为绿色 */
              }
              .failing {
                color: #d32f2f; /* 修改为红色 */
              }
            }
            .san-name {
              margin-left: 8px;
            }
          }
          .right {
            font-size: 20px;
            font-weight: 600;
            color: #388e3c; /* 修改为绿色 */
            transition: all 0.3s;
            transform: rotate(180deg);
          }
          .activeArrow {
            transform: rotate(0deg);
          }
        }
        .item-child {
          max-height: 120px;
          margin-top: 4px;
          overflow-y: scroll;
          transition: all 0.3s;
          &_list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 2px 15px;
            margin-top: 6px;
            cursor: default;
            .list-left {
              display: flex;
              align-items: center;
              margin-left: 10px;
              .scan_item {
                font-size: 13px;
              }
              .code {
                width: 64px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .verification_item {
                width: 136px;
                margin-left: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .verification_purpose {
                width: 228px;
                margin-left: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .verification_target {
                width: 125px;
                margin-left: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .list-right {
              .success-text {
                color: #00796b; /* 修改为绿色 */
              }
              .scaning {
                color: #00796b; /* 修改为深绿色 */
              }
              .warning-text {
                color: #f57c00; /* 修改为橙色 */
              }
              .failed-text {
                color: #d32f2f; /* 修改为红色 */
              }
            }
          }
        }
      }
    }
  }
  .warning {
    font-size: 18px;
    color: #f57c00;
  }
  .successing {
    font-size: 18px;
    color: #388e3c;
  }
  .failing,
  .icon-fengxianfenxi {
    font-size: 18px;
    color: #d32f2f;
  }

  /* 检测圆圈动画 */
  .loading-circle {
    width: 13px;
    height: 13px;
    border: 2px solid transparent;
    border-top: 2px solid #009688; /* 修改为绿色 */
    border-right: 2px solid #009688; /* 修改为绿色 */
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* 进度条 */
  .progress-container {
    position: relative;
    width: 100%;
    height: 4px;
    overflow: hidden;
    background-color: #e0e0e0;
    border-radius: 25px;
    box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
  }
  .progress-bar {
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, #009688, #00796b); /* 修改为绿色系渐变 */
    border-radius: 25px;
    box-shadow: 0 0 10px #00796b; /* 修改为绿色 */
    // animation: progress 4s ease-in-out infinite;
    transition: all 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  @keyframes progress {
    0% {
      width: 0%;
    }
    50% {
      width: 50%;
    }
    100% {
      width: 100%;
    }
  }
}
</style>
